.form-validation {
  width: 500px;
}

.form-validation div {
  margin-top: 10px;
}

.form-validation div:first-child {
  margin-top: 0;
}

.form-validation label {
  display: block;
  padding-bottom: 5px;
  font-weight: bold;
  font-size: 16px;
}

.form-validation input,
.form-validation textarea {
  display: block;
  padding: 0 20px;
  outline: none;
  border: 1px solid #ccc;
  width: 100%;
  height: 40px;
  caret-color: #09f;
  transition: all 300ms;
}

.form-validation input:valid,
.form-validation textarea:valid {
  border-color: #3c9;
  box-shadow: inset 5px 0 0 #3c9;
}

.form-validation input:invalid,
.form-validation textarea:invalid {
  border-color: #f66;
  box-shadow: inset 5px 0 0 #f66;
}

.form-validation textarea {
  height: 122px;
  resize: none;
  line-height: 30px;
  font-size: 16px;
}
